//插槽的内容如果是一个 props.children 就是一个对象
//插槽的内容如果是两个及以上就是 props.children 就是一个数组
//循环尽量要用 react.Children.map(props.children,函数) 既可以循环对象，也可以循环数组
import react from "react";

//函数名首字母必须大写
function Func(props){
   console.log(props);
//    let {name,age}=props;

   let name=props.name||"宋松丽";
   let age=props.age||29;
   let time=new Date().toLocaleString();

   function changeTime(){
      setInterval(() => {
        time=new Date().toLocaleString();
        console.log(time);
      }, 1000);
   }

   return <div>
       <h1>函数组件--{name}--{age}</h1>
       {/* {props.children.map((item,index)=>{
          return <h2 key={index}>{item}</h2>
       })} */}

       {react.Children.map(props.children,(item,index)=>{
           return <h3 key={index}>{item}</h3>
       })}

       <h1>{time}</h1>
       <button onClick={changeTime}>点击修改时间</button>
   </div>
}

//导出组件
export default Func;